import { searchList } from '@/config'
import { SearchType } from '@/config/types';
import { appConfigActions } from '@/store/appConfigSlice';
import { useAppDispatch, useAppSelector } from '@/utils/hooks';
import { getClassNames } from 'magic-ui-react';
import { useEffect, useState } from 'react';
import styles from './styles.module.less'

const SearchList = () => {
  const [currentSearch, setCurrentSearch] = useState<SearchType>();
  const dispatch = useAppDispatch()
  const {
    currentSearchEngines
  } = useAppSelector(state => state.appConfig)
  useEffect(() => {
    setCurrentSearch(currentSearchEngines)
  }, [])
  return (
    <div className={styles.SearchList}>
      <div className={styles.searchIcons}>
        {searchList.map(e => {
          return (
            <div
              draggable={false}
              key={e.key}
              className={getClassNames([
                styles.searchIcon,
                {
                  [styles.searchIconChecked]: e.key === currentSearch?.key
                }
              ])}
              onClick={() => {
                dispatch(appConfigActions.updateOther({ currentSearchEngines: e, }))
                setCurrentSearch(e)
              }}
            >
              <img width={40} height={40} src={e.iconImage} alt="icon" />
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default SearchList